<template>
  <div class="dialog">
    <el-dialog title="新建车次" width="30%" v-model="props.dialogVisible">
      <span :style="{ marginLeft: '80px' }">车站</span>&emsp;<el-input
        v-model="input"
        placeholder="请输入车站名称"
        :style="{ width: '150px' }"
        @change="addChange"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="close1">取消</el-button>
          <el-button type="primary" @click="confirm"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, defineProps, toRefs, defineEmits } from "vue";
import { ElMessageBox } from "element-plus";

const props = defineProps({
  dialogVisible: Boolean,
});
const input = ref("");
let { dialogVisible } = toRefs(props);
const emits = defineEmits(["closeTan", "confirm1", "addList"]);
const close1 = () => {
  dialogVisible = false;
  emits("closeTan", dialogVisible);
};
const confirm = () => {
  dialogVisible = false;
  emits("confirm", {
    dialogVisible,
    inp: input.value,
  });
};
const addChange = () => {
  console.log(input.value);
};
const handleClose = (done) => {};
</script>
<style>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
